<template>
    <div>
        <mt-index-list>
        <mt-index-section index="荤" class="title">
            <i class="iconfont icon-jia add"  @click="popupVisible=!popupVisible;params.type = 1;isEdit=false"></i>
            <mt-cell :title="item.name" v-for="(item,index) of meal_list" :key="index" v-show="item.type == 1">
                <mt-button size="small" plain @click="()=>{popupVisible = !popupVisible;params = item;isEdit=true}">修改</mt-button>
            </mt-cell>
        </mt-index-section>
        <mt-index-section index="素" class="title">
            <i class="iconfont icon-jia add" @click="popupVisible=!popupVisible;params.type = 2;isEdit=false"></i>
            <mt-cell :title="item.name" v-for="(item,index) of meal_list" :key="index" v-show="item.type == 2">
                <mt-button size="small" plain @click="()=>{popupVisible = !popupVisible;params = item;isEdit=true}">修改</mt-button>
            </mt-cell>
        </mt-index-section>
        </mt-index-list>
        <mt-popup
        v-model="popupVisible"
        class="add-meal"
        popup-transition="popup-fade">
           <!-- <div class="dish-type" v-if="!isEdit">
                <div @click="()=>{params.type = 1}" :class="params.type == 1?'selected-index':''">荤</div>
                <div @click="()=>{params.type = 2}" :class="params.type == 2?'selected-index':''">素</div>
           </div> -->
           <mt-field label="商品名称" placeholder="请输入商品名称" v-model="params.name"></mt-field>
           <mt-field label="库存" placeholder="请输入库存" type="number" v-model="params.stock"></mt-field>
           <mt-field label="是否上架" :value="params.is_show?'是':'否'" disableClear readonly>
                <mt-switch v-model="params.is_show"></mt-switch>
            </mt-field>
            <mt-field v-if="isEdit" label="是否保留" :value="params.status?'是':'否'" disableClear readonly>
                <mt-switch v-model="params.status"></mt-switch>
            </mt-field>
            <mt-button v-if="!isEdit" type="danger" size="large" @click="add">提交</mt-button>
            <mt-button v-else type="danger" size="large" @click="add">修改</mt-button>
        </mt-popup>
    </div>
</template>
<script>
import {mealList,addMeal,editMeal} from '../api'
import {Toast} from 'mint-ui'
export default {
    data() {
        return {
            popupVisible:false,
            isMeat:false,
            meal_list:[],
            isEdit:false,
            params:{
                type:1,
                name:'',
                stock:0,
                is_show:false,
                status:false
            }
        }
    },
    created(){
        this.getMealList();
    },
    methods:{
        getMealList(){
            const data = {
                token:this.$store.getters.token
            }
            mealList(data).then(res=>{
                // console.log(res);
                this.meal_list = res.data;
            })
        },
        add(){
            if(!this.params.name){
                Toast("请输入商品名称");
                return;
            }else if(this.params.stock <= 0 || !this.params.stock){
                Toast('库存不能为空,不能少于1份');
                return;
            }
            this.params.is_show = this.params.is_show?1:0
            this.params.status = this.params.status?1:0
            this.params.token = this.$store.getters.token
            if(this.isEdit){
                editMeal(this.params).then(res=>{
                    if(res.code == 200){
                        this.params = {};
                        this.getMealList();
                    }
                    Toast(res.msg);
                    this.popupVisible = !this.popupVisible
                })
            }else{
                addMeal(this.params).then(res=>{
                    if(res.code == 200){
                        this.params = {};
                        this.getMealList();
                    }
                    Toast(res.msg);
                    this.popupVisible = !this.popupVisible
                })
            }
        }
    }
}
</script>
<style scoped>
    .add{
        position: absolute;
        right: 1rem;
        top: 0.4rem;
        z-index: 1000;
        font-size: 1.5rem;
        color: #999;
    }
    .title{
        position: relative;
    }
    .dish-type{
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .dish-type div{
        border:1px solid #ccc;
        width: 4rem;
        text-align: center;
        margin: 1rem;
        padding: 0.2rem 0;
        border-radius: 0.4rem;
    }
    .selected-index{
        border: 1px solid #F23D3D !important;
    }
    .add-meal{
        width: 80%;
        border-radius: 10px;
    }
</style>